<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            width: 800px;
            height: 500px;
            margin: 50px auto;
        }
        #box h2{
            text-align: center;
        }
        #box>a{
            position: absolute;
            right: 80px;
            top: 60px;
        }
        table{
            margin-top: 100px;
            width: 780px;
            border: 2px solid #ddd;
            border-collapse: collapse;
        }
        table tbody tr:nth-child(2n){
            background: #90ee90;
        }
        td,th{
            border: 3px solid white;
            padding: 5px 20px;
            /*text-align: center;*/
        }
        th{
            background: #add8e6;
        }
        .pages{
            margin: 0 auto;
            width: 480px;
        }
        .pages select,
        .pages a{
           padding:0 5px;
            border-right: 2px solid #aca3a2;
        }
        .pages a{
            text-decoration: none;
            color:#aca3a2;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>空气质量监测信息库</h2>
    <a href="addair.html">添加空气质量信息</a>
    <table>
        <tr>
            <th>序号</th>
            <th>区域</th>
            <th>检测时间</th>
            <th>PM10数据</th>
            <th>PM2.5数据</th>
            <th>监测站</th>
            <th>操作</th>
        </tr>
        <tbody id="tbody">
        </tbody>
    </table>
    <div class="pages">
        <a href="javascript:void(0)" id="first" class="page">首页</a>
        <a href="javascript:void(0)" id="up" class="page">&lt;&lt;上一页</a>
        <a href="javascript:void(0)" id="next" class="page">下一页&gt;&gt;</a>
        <a href="javascript:void(0)" id="last" class="page">尾页</a>
        <span id="span"></span>
    </div>
</div>
</body>
<script>
    let currentPage
    let pageSize
    let total
    let pageNum;
    function getList(){
        $.ajax({
            type:"post",
            url:"/getAll.do",
            data:{
                    currentPage:currentPage || 1,
                    pageSize:pageSize || 5,
            },
            success:function (res){
                currentPage = res.pageNum
                pageNum = res.pages
                total = res.total
                let list = res.list
                let tbody = $("#tbody");
                tbody.find("tr").remove();
                for (let i = 0; i < list.length; i++) {
                    let row = $("<tr></tr>");
                    row.append($("<td></td>").text(list[i].id));
                    row.append($("<td></td>").text(list[i].district.name));
                    row.append($("<td></td>").text(list[i].monitorTime));
                    row.append($("<td></td>").text(list[i].pm10));
                    row.append($("<td></td>").text(list[i].pm25));
                    row.append($("<td></td>").text(list[i].monitoringStation));
                    let currentId = list[i].id;
                    row.append($("<td></td>").append(
                        $("<a href='javascript:void(0)'>删除</a>").click(function() {
                            del(currentId);  // 使用局部变量来保证正确的 id 被传递
                        })
                    ));
                    tbody.append(row);
                }
                $("#span").text("第"+currentPage+"页/共"+pageNum+"页（"+total+"条）")
            }
        })
    }
    $("#pageSize").click(function (){
        pageSize = $(this).val()
        getList();
    })
    $(".page").click(function (){
        $("#span").text("第"+currentPage+"页/共"+pageNum+"页（"+total+"条）")
        let num = $(this).attr("id");
        if(num == "first"){
            currentPage = 1
            getList();
        } else if (num == "up" && currentPage!=1 ){
            currentPage--;
            getList();
        }else if(num == "next" && pageNum>currentPage){
            currentPage++;
            getList();
        } else if(num == "last"){
            currentPage = pageNum
            getList();
        }
    })

    $("#addUser").click(function (){
        location.href = 'addUser.html'
    })
    function del(id){
        if(confirm("确定要删除吗")) {
            $.ajax({
                type: "post",
                url: "/delAir.do",
                data: {id: id},
                success: function (res) {
                    if (res == "true") {
                        getList()
                    } else {
                        alert("删除失败")
                    }
                }
            })
        }
    }
    getList()
</script>
</html>
